<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <el-container>
        <el-main class="content-main">
            <div class="ps-panel" style="height: 100%;">
                <div class="ps-panel-head">
                    <i class="ps-panel-head-icon iconfont icon-list"></i>
                    <span class="ps-panel-head-title">列表</span>
                    <span class="query">
                        <el-button type="primary" size="mini" @click="add">添加语法</el-button>
                    </span>
                </div>

                <div class="ps-panel-body">
                    <el-table :data="tableData" size="small" highlight-current-row stripe style="width: 100%; margin-bottom: 10px;">
                        <el-table-column prop="id" label="ID" width="50"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column prop="is_enable" label="是否启用" width="100">
                            <template slot-scope="scope">
                                {{scope.row['is_enable']==1 ? '启用' : '未启用'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="addtime" label="添加时间" width="150"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                                v-if='paginations.total > 0'
                                :page-size="paginations.pageSize"
                                :layout="paginations.layout"
                                :total="paginations.total"
                                :current-page='paginations.pageIndex'
                                @current-change='jump'
                                style="text-align: right;">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </el-main>

        <el-dialog title="语法" :visible.sync="grammarForm.visible" width="1200px" class="edit">
            <iframe class="grammar-iframe" ref="grammar-iframe" src="structure_preview/index.html" @load="iframeLoad" hidefocus="true" frameborder="0" scrolling="auto" style="width: 100%; height: 590px;"></iframe>
            <span slot="footer" class="dialog-footer">
                <el-button @click="grammarForm.visible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </el-container>

</template>

<script>
    export default {
        name: "index",
        data: function () {
            return {
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 20,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                },
                tableData: [],
                grammarForm: {
                    visible: false,
                    id: 0,
                    name: '',
                    content: '',
                    is_enable: 0
                },
                grammarIframe: null
            };
        },
        methods:  {
            jump(i) {
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                this.$store.dispatch('ajax', {url: 'api/grammarModelsList', method: 'get', data: {page: i, number: this.paginations.pageSize},
                    succeed:
                        (res) => {
                            this.tableData = res.rows;
                            this.paginations.total = res.total;
                        }
                });
            },
            add() {
                this.grammarForm.visible = true;
                this.grammarForm.id = 0;
                this.grammarForm.name = '';
                this.grammarForm.content = '';
                this.grammarForm.is_enable = 0;

                const timer = setInterval(() => {
                    const iframe = this.$refs['grammar-iframe'];
                    if (iframe) {
                        clearInterval(timer);
                        const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                        iframeDoc.getElementById('inputText').value = '';
                        iframeDoc.getElementById('xml_area').value = '';
                        iframeDoc.getElementById('enable').checked = false;
                        iframeDoc.getElementById('mask').style.display = 'block';
                        iframeDoc.getElementById('analysisPanel').style.display = 'none';
                        iframeDoc.getElementById('usingManual').style.display = 'block';
                        iframeDoc.getElementById('loadingTag').style.display = 'none';
                        iframe.contentWindow.labelExplanationPanel.closePanel();
                        iframe.contentWindow.labelExplanationPanel._responseBtnHide();
                    }
                }, 200);
            },
            edit(row) {
                this.grammarForm.visible = true;
                this.grammarForm.id = row.id;
                this.grammarForm.name = row.name;
                this.grammarForm.content = row.content;
                this.grammarForm.is_enable = row.is_enable;

                const timer = setInterval(() => {
                    const iframe = this.grammarIframe;
                    if (iframe) {
                        clearInterval(timer);
                        const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                        iframeDoc.getElementById('inputText').value = row.name;
                        iframeDoc.getElementById('xml_area').value = row.content;
                        iframeDoc.getElementById('enable').checked = row.is_enable ? true : false;
                        iframeDoc.getElementById('mask').style.display = 'none';
                        iframeDoc.getElementById('analysisPanel').style.display = 'block';
                        iframeDoc.getElementById('usingManual').style.display = 'none';
                        iframe.contentWindow.labelExplanationPanel.closePanel();
                        iframe.contentWindow.labelExplanationPanel._responseBtnAppear() ;
                        iframe.contentWindow.$("#load-local-xml-btn").trigger('click');
                    }
                }, 200);
            },
            iframeLoad() {
                this.grammarIframe = this.$refs['grammar-iframe'];
            },
            save() {
                const timer = setInterval(() => {
                    const iframe = this.$refs['grammar-iframe'];
                    if (iframe) {
                        clearInterval(timer);
                        const iframeDoc = document.all ? iframe.contentWindow.document : iframe.contentDocument;
                        this.grammarForm.name = iframeDoc.getElementById('inputText').value;
                        this.grammarForm.content = iframeDoc.getElementById('xml_area').value;
                        this.grammarForm.is_enable = iframeDoc.getElementById('enable').checked ? 1 : 0;

                        if (this.grammarForm.name === '' || this.grammarForm.content === '') {
                            this.$message.warning('请输入分析语句并分析');
                            return;
                        }

                        if (this.grammarForm.id == 0) {
                            this.$store.dispatch('ajax', {url: 'api/grammarModelAdd', method: 'post', data: {name: this.grammarForm.name, content: this.grammarForm.content, is_enable: this.grammarForm.is_enable}, succeed: () => {
                                    this.jump();
                                    this.$message.success('保存成功');
                                    this.grammarForm.visible = false;
                                }
                            });
                        } else {
                            this.$store.dispatch('ajax', {url: 'api/grammarModelEdit', method: 'put', data: {id: this.grammarForm.id, name: this.grammarForm.name, content: this.grammarForm.content, is_enable: this.grammarForm.is_enable}, succeed: () => {
                                    this.jump();
                                    this.$message.success('保存成功');
                                    this.grammarForm.visible = false;
                                }
                            });
                        }
                    }
                }, 200);
            },
            del(row) {
                this.$store.dispatch('ajax', {url: 'api/grammarModelDel', method: 'put', data: [row.id], succeed: () => {
                        this.jump();
                        this.$message.success('删除成功');
                        this.grammarForm.visible = false;
                    }
                });
            }
        },
        mounted: function () {
            this.jump(1);
        }
    }
</script>